/*
 * @Description:
 * @Author: 小雨
 * @Date: 2024-09-13 22:24:20
 * @LastEditTime: 2024-09-14 01:38:16
 * @LastEditors: 小雨
 */
import React, { useEffect, useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, message } from 'antd';
import axios from 'axios';

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};

const checkPasswordStrength = (rule: any, value: string) => {
    const strongRegex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})');
    if (value && !strongRegex.test(value)) {
        throw new Error('请输入一个至少包含8个字符的更安全的密码，一个大写、一个小写、一个数字和一个特殊字符！');
    }
    return Promise.resolve();
};

const App: React.FC = () => {
    const [islogin, setIslogin] = useState(true);
    const [form] = Form.useForm();

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log(values);

        axios({
            url: '/api/login/account',
            data: {
                username: values.username,
                password: values.password,
            },
            method: 'post',
        }).then((res) => {
            if (res.data.status === 'ok') {
                form.resetFields();
                setIslogin(true);
                message.success('请求成功');
            } else if (res.data.status === 'error') {
                message.error('登录失败');
            }
        });
    };

    const onReset = () => {
        setIslogin(false);
        form.resetFields();
    };
    return (
        <div style={{ marginTop: '30px', padding: '30px' }}>
            <Form form={form} name='basic' labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} autoComplete='off'>
                <Form.Item<FieldType>
                    label='账号'
                    name='username'
                    validateTrigger='onChange'
                    rules={[
                        {
                            type: 'email',
                            message: '请输入有效的电子邮件地址',
                        },
                        {
                            required: true,
                            message: '请输入电子邮件地址',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<FieldType>
                    label='密码'
                    name='password'
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: '请输入密码！',
                        },
                        {
                            validator: checkPasswordStrength,
                            message: '请输入一个至少包含8个字符的更安全的密码，一个大写、一个小写、一个数字和一个特殊字符！',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                {islogin ? (
                    <Form.Item<FieldType> name='remember' valuePropName='checked' wrapperCol={{ offset: 8, span: 16 }}>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                ) : null}

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type='primary' htmlType='submit'>
                        {islogin ? '登录' : '确认密码'}
                    </Button>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>{islogin ? <Button onClick={onReset}>注册</Button> : null}</Form.Item>
            </Form>
        </div>
    );
};

export default App;
